<template>
 <div class="orderManagement_container orderList">
    <!-- 查询 -->
    <div class="search_box">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" style="background-color:#fff;">
            <Row>
                <Col span="5">
                    <FormItem label="选择渠道" prop="channelId">

                        <Select v-model="formValidate.channelId" placeholder="请选择.." style="width:10vw;">
                            <Option value="" >请选择</Option>
                            <Option v-for="item in channels" :value="item.id" :key="item.value">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="拍下时间：">
                        <Row>
                            <Col span="11">
                                <FormItem label="" prop="takedate">    
                                    <DatePicker type="datetime" placeholder="请输入开始时间" v-model="formValidate.orderDateFrom" format="yyyy-MM-dd" @on-change="formValidate.orderDateFrom=$event"></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="2" style="text-align: center">-</Col>
                            <Col span="11">
                                <FormItem label="" prop="taketime">    
                                    <DatePicker type="datetime" placeholder="请输入结束时间" format="yyyy-MM-dd" v-model="formValidate.orderDateTo" @on-change="formValidate.orderDateTo=$event"></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="付款时间：" :label-width="120">
                        <Row>
                            <Col span="11">
                                <FormItem label="" prop="paydate">    
                                    <DatePicker type="datetime" placeholder="请输入开始时间" format="yyyy-MM-dd" v-model="formValidate.paymentDateFrom" @on-change="formValidate.paymentDateFrom=$event"></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="2" style="text-align: center">-</Col>
                            <Col span="11">
                                <FormItem label="" prop="paytime">    
                                    <DatePicker type="datetime" placeholder="请输入结束时间" format="yyyy-MM-dd" v-model="formValidate.paymentDateTo" @on-change="formValidate.paymentDateTo=$event"></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                    </FormItem>
                </Col>
            </Row>
            <Row style="margin-top:2vh;">
                <Col span="5">
                    <FormItem label="订单状态">
                        <Select v-model="formValidate.orderStatusList" placeholder="请选择.." style="width:10vw;" clearable>
                            <Option value="1">买家已付款,等待卖家发货</Option>
                            <Option value="2">交易关闭</Option>
                            <Option value="3">交易成功</Option>
                            <Option value="4">卖家已发货,等待买家确认</Option>
                            <Option value="5">未创建支付宝交易</Option>
                            <Option value="6">等待买家付款</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="5">
                    <FormItem label="订单类型">
                        <Select v-model="formValidate.orderType" placeholder="请选择.." style="width:10vw;" clearable>
                            <Option value="1">购买</Option>
                            <Option value="2">退货</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="5">
                    <FormItem label="订单编号" prop="orderNo">
                        <Input v-model="formValidate.orderNo" placeholder="请输入订单编号" clearable></Input>
                    </FormItem>
                </Col>
                <Col span="3" style="margin-left:1vw;">
                    <Button @click="modal1 = true">请选择商品</Button>
                </Col>
                <Col span="5">
                    <Button type="primary" @click="handleSubmit('formValidate')">开始筛选</Button>
                </Col>
            </Row>
        </Form>
        <!-- 弹出框 -->
        <Modal
            v-model="modal1"
            title="选择商品"
            @on-ok="ok"
            ok-text="确定"
            @on-cancel="cancel" width="820">
            <Form ref="modalformValidate" :model="modalformValidate" :rules="rulemodalValidate" :label-width="80">
                <Row>
                    <Col span="24" >
                        <FormItem label="选择店铺：" prop="store" :label-width="90">
                            <Select v-model="modalformValidate.channelId" placeholder="请选择" style="width:200px;" clearable>
                              <Option v-for="item in channels" :value="item.id" :key="item.value">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12" >
                        <FormItem label="" prop="productcondition">
                            <Row>
                                <Col span="6">
                                    <FormItem label="" prop="productcondition">
                                        <Select v-model="modalformValidate.productcondition" style="width:100px;margin:4vh 0px 0px -5vw;" clearable>
                                            <Option value="1" selected>商品名称</Option>
                                            <Option value="2">商品编码</Option>
                                            <Option value="3">商品ID</Option>
                                        </Select>
                                    </FormItem>
                                </Col>
                                <Col span="6" style="width:200px;margin:-4.5vh 0px 0px 4vw;">
                                    <FormItem label="" prop="condition">
                                        <Input enter-button="Search" placeholder="输入商品条件进行搜索" v-model="modalformValidate.condition" clearable />
                                    </FormItem>
                                </Col>
                                <Col span="6" style="width:50px;margin:-4.5vh 0px 0px 19vw;">
                                    <Button icon="ios-search" @click="modalhandleSubmit('modalformValidate')"></Button>
                                </Col>
                            </Row>
                        </FormItem>
                    </Col>
                </Row>
              <CheckboxGroup v-model="formValidate.productIds" @on-change="selectProduct()">
                <Row v-for="(item,index) in productList"  :key="index">
                    <Col span="24" style="margin-top:4vh;margin-left:-5vw;">
                        <FormItem label="">
                                <Row>
                                    <Col span="24">
                                        <Checkbox :label="item.id" style="position:absolute;" value="" >&nbsp;</Checkbox>
                                        <div :style="product_container">
                                            <img v-if="item.pic == null || item.pic ==''" src="../../../static/img/weitanai.jpg" alt="" style="width:70px;height:70px;">
                                            <img v-if="item.pic != null && item.pic !=''" :src="item.pic" alt="" style="width:70px;height:70px;">
                                            <div :style="pruduct_info_box">
                                                <p :style="product_info_text">{{item.name}}</p>
                                                <p :style="product_price" v-if="item.unitPrice !=null">￥{{item.unitPrice }}</p>
                                                <p :style="product_price" v-else>￥0.00</p>
                                                <p :style="product_price_time">商品修改时间：{{item.updateDate| formatDate}}</p>
                                            </div>
                                        </div>
                                    </Col>
                                </Row>
                        </FormItem>
                    </Col>
                </Row>
              </CheckboxGroup>
                <Row type="flex" justify="center" class="code-row-bg">
                    <Col style="margin-top:2vh;">
                        <Page :id="pageId1" show-total :total="totals" :page-size="pageSizes" @on-change="pageables" @on-page-size-change="changeproPageSize()" show-sizer show-elevator></Page>
                    </Col>
                  <Col style="margin-left: 7px">
                    <Button style="margin-top: 19px;" type="primary"  @click="goElevatorPage(pageId1)">跳转</Button>
                  </Col>
                </Row>
            </Form>
        </Modal>
    </div>
    <!-- 查询结果 -->
    <div class="serch_result_container">
        <ul class="serch_result_list" v-for="(item,index) in orderlist"  :key="index">
            <li class="th">
                <span>商品信息</span>
                <span>单价(元)</span>
                <span>数量</span>
                <span>买家</span>
                <span>交易状态</span>
                <span>实收款(元)</span>
            </li>
            <li>
                <div class="product_box">
                    <div class="product_box_thead">
                        <span style="margin-left:-10px;">订单号:{{item.order_no}}</span>
                        <span>下单：{{item.transaction_time | formatDate}}</span></span>
                        <span>付款：{{item.payment_time | formatDate}}</span></span>
                        <span>订单来源：{{item.channel_name}}</span>
                    </div>
                </div>
            </li>
            <li>
                <div class="product_detail_box">
                    <div class="product_info_box" >
                        <div style="margin-bottom: 10px;" v-for="(transactionDetail,index) in item.transactionDetailList"  :key="index" >
                          <div v-if="index != 0">
                            <Divider/>
                          </div>
                          <img v-if="transactionDetail.product_pic == null || transactionDetail.product_pic == ''" src="../../../static/img/weitanai.jpg" alt="" style="width:80px;height:80px;margin:10px 0px 0px 10px;position:absolute;">
                          <img v-if="transactionDetail.product_pic != null && transactionDetail.product_pic !=''" :src="transactionDetail.product_pic" alt="" style="width:80px;height:80px;margin:10px 0px 0px 10px;position:absolute;">
                          <div class="text_box">
                            <p class="product_name">商品标题：{{transactionDetail.title}}</p>
                            <p class="merchant_code">商品ID：{{transactionDetail.product_id}}</p>
                            <p class="color_classification">SKU名称：{{transactionDetail.product_name}}</p>
                          </div>
                          <div class="price_box">
                            <p class="price">￥{{transactionDetail.sale_price}}</p>
                          </div>
                          <div class="total_box">
                            <p class="total">{{transactionDetail.product_qty}}</p>
                          </div>
                        </div>
                    </div>
                    <div class="buyer_info_box">
                        <p class="name">姓名：{{item.receiver_name}}</p>
                        <p class="wangwang">旺旺：{{item.nickname}}</p>
                        <p class="tell">电话：{{item.receiver_mobile}}</p>
                        <div v-for="(transactionDetail,index) in item.transactionDetailList"  :key="index" v-if="index != 0">
                          <p class="name">&nbsp;</p>
                          <p class="wangwang">&nbsp;</p>
                          <p class="tell">&nbsp;</p>
                        </div>
                    </div>
                    <div class="trading_status">
                        <p class="status" v-if ="item.order_status ==1 ">买家已付款，等待卖家发货</p>
                        <p class="status" v-if ="item.order_status ==2 ">交易关闭</p>
                        <p class="status" v-if ="item.order_status ==3 ">交易成功</p>
                        <p class="status" v-if ="item.order_status ==4 ">卖家已发货，等待买家确认</p>
                        <p class="status" v-if ="item.order_status ==5 ">未创建支付宝交易</p>
                        <p class="status" v-if ="item.order_status ==6 ">等待买家付款</p>
                      <div v-for="(transactionDetail,index) in item.transactionDetailList"  :key="index" v-if="index != 0">
                        <p class="status">&nbsp;</p>
                      </div>
                    </div>
                    <div class="actual_collection">
                        <p class="actual_price">￥{{item.real_payment_amount}}</p>
                        <p class="intro">(含运费：￥{{item.payment_post}})</p>
                        <div v-for="(transactionDetail,index) in item.transactionDetailList"  :key="index" v-if="index != 0">
                          <p class="status">&nbsp;</p>
                        </div>
                    </div>
                </div>
                <div class="addr_box">
                    <p style="padding-left:10px;height:20px;">地址：{{item.receiver_address}}</p>
                </div>
            </li>
        </ul>
    </div>
    <Row type="flex" justify="center" class="code-row-bg">
        <Col style="margin-top:2vh;">
            <Page :id="pageId" show-total :total="total" :page-size="pageSize" @on-change="pageable" @on-page-size-change="changegroupPageSize" show-sizer show-elevator></Page>
        </Col>
        <Col push="1">
            <Button style="margin-top: 2vh;" type="primary" @click="goElevatorPage(pageId)">跳转</Button>
        </Col>
    </Row>
 </div>    
</template>
<script>
import {fetchList,fetchChannelList,fetchProductList} from '@/api/order'
export default {
 name:'orderList',
 data () {
   const validateorderNumber = (rule, value, callback) => {
    if(!value){
            callback(new Error('请输入订单编号'));
    }else{
        if(value % 1 != 0){
            callback(new Error("请输入整数类型的订单编号"));
        }else{
            callback();
        }
    }
  };
return {
    pageId:"targetPage",
    pageId1:"targetPage1",
    pageNum: 1,
    pageSize: 10,
    tabledata:[],
    total: 0,

    pageNums: 1,
    pageSizes: 10,
    totals: 0,

    modal1: false,      
    model1:'',
    checked:false,
    formValidate: {       //查询参数
        channelId: '',     //渠道
        orderDateFrom: '',
        orderDateTo: '',
        paymentDateFrom: '',
        paymentDateTo: '',
        orderStatusList: '',
        appraisestatus: '',
        orderType: '',
        orderNo:'',
        productIds:[],
        pageNum: 1,
        pageSize: 10,
        total: 0,
    },
    orderlist:[],
    transactionDetailList:[],
    channels:[],
    productList:[],
    modalformValidate: {    //模态框参数   
        channelId:'',
        productcondition:'',
        condition:'',
        checkbox: [],
    },
    ruleValidate: {
        ordernum: [
            { required: true, type: 'number',  trigger: 'blur',validator: validateorderNumber, },
        ],
    },
    rulemodalValidate:{  // 商品条件模态框验证
            channelId: [
                { required: true, type: 'string', message: '请选择店铺', trigger: 'change' },
            ],
            productcondition: [
                {  type: 'string', message: '请选择商品条件', trigger: 'change' },
            ],
            condition: [
                { required: true, type: 'string', min: 1, message: '请输入商品条件', trigger: 'blur' },
            ],
        }
    }  
},
  created() {
    this.updateTableList(this.params);
    this.channelList();
    this.productlList();
  },
  methods: {
    goElevatorPage(pageId){
      var evtObj;
      var thisPage=document.getElementById(pageId);
      var elevatorDiv=thisPage.getElementsByClassName("ivu-page-options-elevator");
      if(elevatorDiv && elevatorDiv.length>0){
        var pageInput = elevatorDiv[0].getElementsByTagName("input")[0];
        if (window.KeyEvent) {//firefox 浏览器下模拟事件
          evtObj = document.createEvent('KeyEvents');
          evtObj.initKeyEvent("keyup", true, true, window, true, false, false, false, 13, 0);
        } else {//chrome 浏览器下模拟事件
          evtObj = document.createEvent('UIEvents');
          evtObj.initUIEvent("keyup", true, true, window, 1);
          delete evtObj.keyCode;
          if (typeof evtObj.keyCode === "undefined") {//为了模拟keycode
            Object.defineProperty(evtObj, "keyCode", { value: 13 });
          } else {
            evtObj.key = String.fromCharCode(13);
          }
        }
        pageInput.dispatchEvent(evtObj);
      }
    },
    ok(){
    },
    cancel () {
      this.formValidate.productIds=[];
    },
    modalhandleSubmit (name) {
        this.pageNums = 1;
        this.pageSizes = 10;
        this.productlList();
    },
    handleSubmit (name) {
      this.pageNum = 1;
      this.pageSize = 10;
      this.updateTableList();
    },
    // 切换分页
    pageable(current) {
         this.pageNum = current;
         this.updateTableList();
    },
    pageables(current) {
        this.pageNums = current;
        this.productlList();
    },
    changegroupPageSize(pageSize){ // 切换每页条数
      this.pageNum = 1;
      this.pageSize = pageSize;
      this.updateTableList();
    },

    changeproPageSize(pageSize){ // 切换modal每页条数
      this.pageNums = 1;
      this.pageSizes = pageSize;
      this.productlList();
    },
    //订单列表查询
    updateTableList() {
      var reqParams = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      if (this.formValidate.channelId) {
        reqParams.channelId = this.formValidate.channelId;
      }

      var date1, date2;
      if (null != this.formValidate.orderDateFrom)
        date1 = Date.parse(this.formValidate.orderDateFrom);
      if (null != this.formValidate.orderDateTo)
        date2 = Date.parse(this.formValidate.orderDateTo);
      if (date1 > date2) {
        this.$Message.error("拍下时间开始时间不能大于结束时间");
        return;
      }
      if (this.formValidate.orderDateFrom) {
        reqParams.orderDateFrom = this.formValidate.orderDateFrom;
      }
      if (this.formValidate.orderDateTo) {
        reqParams.orderDateTo = this.formValidate.orderDateTo;
      }
      if (null != this.formValidate.paymentDateFrom)
        date1 = Date.parse(this.formValidate.paymentDateFrom);
      if (null != this.formValidate.paymentDateTo)
        date2 = Date.parse(this.formValidate.paymentDateTo);
      if (date1 > date2) {
        this.$Message.error("付款时间开始时间不能大于结束时间");
        return;
      }
      if (this.formValidate.paymentDateFrom) {
        reqParams.paymentDateFrom = this.formValidate.paymentDateFrom;
      }
      if (this.formValidate.paymentDateTo) {
        reqParams.paymentDateTo = this.formValidate.paymentDateTo;
      }


      if (this.formValidate.orderStatusList) {
        reqParams.orderStatusList = this.formValidate.orderStatusList;
      }
      if (this.formValidate.orderType) {
        reqParams.orderType = this.formValidate.orderType;
      }
      if (this.formValidate.orderNo) {
        reqParams.orderNo = this.formValidate.orderNo;
      }
      if(this.formValidate.productIds && this.formValidate.productIds.length>0){
        reqParams.productIds = this.formValidate.productIds.join(",");
      }

      fetchList(reqParams).then(res => {
        if (res.data.code == 200) {
          if (res.data.result && res.data.result.transactionPage) {
            this.orderlist = res.data.result.transactionPage.records;

            this.pageSize = res.data.result.transactionPage.size;
            this.pageNum = res.data.result.transactionPage.pages;
            this.total = res.data.result.transactionPage.total;
          }
        } else {
          this.$Message.error('操作失败')
        }
      })
      .catch(error=>{
          this.$Message.error("操作失败【" + error + "】");
      })
    },
    //渠道
    channelList(){
      fetchChannelList().then(res=>{
        if (res.data.code == 200) {
          if(res.data.data){
            this.channels =  res.data.data;
          }
        }
      })
      .catch(error=>{
          this.$Message.error("操作失败【" + error + "】");
      })
    },
    productlList(){
      var reqParams = {
        pageNum: this.pageNums,
        pageSize: this.pageSizes,
        channelId:this.modalformValidate.channelId,
      }
      if(this.modalformValidate.productcondition == 1){//
        reqParams.productName = this.modalformValidate.condition;
      }else if(this.modalformValidate.productcondition == 2){
        reqParams.productCode = this.modalformValidate.condition;
      }else if(this.modalformValidate.productcondition == 3){
        reqParams.productId = this.modalformValidate.condition;
      }
      fetchProductList(reqParams).then(res=>{
        if (res.data.code == 200) {
          if(res.data.result && res.data.result.productPage){
            this.productList =  res.data.result.productPage.records;
            this.pageSizes =res.data.result.productPage.size;
            this.pageNums = res.data.result.productPage.pages;
            this.totals = res.data.result.productPage.total;
          }
        }
      })
      .catch(error=>{
          this.$Message.error("操作失败【" + error + "】");
      })
    },
  },
  computed: {
    product_container(){     // 模态框查询结果样式
        return {
            width:'95%',
            border:'1px solid #e6f2ff',
            marginLeft:'1.5vw',
        }
    },
    pruduct_info_box(){
        return {
            width:'78%',
            height:'90%',
            position:'absolute',
            margin:'-10vh 0px 0px 5vw',
        }
    },
    product_info_text(){
        return {
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            paddingLeft:'10px',
            marginTop:'-2vh',
        }
    },
    product_price(){
        return {
            color:'red',
            fontSize:'0.7rem',
            paddingLeft:'10px',
            marginTop:'-2vh',
            marginTop:'-2vh',
        }
    },
    product_price_time(){
        return {
            color:'gray',
            fontSize:'0.7rem',
            paddingLeft:'10px',
            marginTop:'-2vh',
        }
    },
  },
}
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.orderManagement_container{
  @include container_global;
  background-color: #fff;
  .serch_result_container{
      width: 100%;
      margin:5vh 0px 0px 1vw;
      .serch_result_list{
        margin-top: 2vh;
        background-color: #fff;
        .th{
            display: inline-block;
            width: 85vw;
            height: 4vh;
            line-height: 4vh;
            border-bottom: 1px solid #e5e7e9;
            span{
                display: inline-block;
            }
            span:nth-child(1){
                width: 40vw;
                padding-left: 10px;
            }
            span:nth-child(2){
                width: 5vw;
            }
            span:nth-child(3){
                width: 5vw;
            }
            span:nth-child(4){
                width: 10vw;
            }
            span:nth-child(5){
                width: 10vw;
            }
            span:nth-child(6){
                width: 10vw;
            }
        }
      }
      .product_box{
        width: 85vw;
        height: 4vh;
        line-height: 4vh; 
        border-bottom: 1px solid #e5e7e9;
        .product_box_thead{         // 查询列表表头
            height:4vh;
            width:50vw;
            display:flex;
            justify-content:space-around;
            border-bottom: 1px solid #e5e7e9;
            span:nth-child(4){
                height:3vh;
                color: #fff;
                line-height: 3vh; 
                margin-top: 5px;
                padding: 0px 2px 0px 2px;
                background-color: #6bb1ff;
            }
        }
      }
      .product_detail_box{          // 商品详情
        width: 85vw;
        min-height: 15vh;
        display: flex;
        .product_info_box{
            width: 50vw;
            height: auto;
            @include order_border_global_right;
            .text_box{
                margin-left:100px;
                .product_name,.merchant_code,.color_classification{
                    color: #999;
                    height: 30px;
                    line-height: 30px;
                }
                .product_name{
                    color: #6998e5;
                    font-size: 0.8rem;
                }
            }
            .price_box{
                width: 5vw;
                height: 20vh;
                margin-top: -11vh;
                margin-left: 39vw;
                position: absolute;
                .price{
                    text-align: center;
                }
            }
            .total_box{
                min-width: 5vw;
                height: 20vh;
                margin-top: -11vh;
                margin-left: 44vw;
                position: absolute;
                .total{
                    text-align: center;
                }
            }
        }
        .buyer_info_box{     // 买家信息
            width: 10vw;
            height: auto;
            @include order_border_global_right;
            .name,.wangwang,.tell{
                color: #333;
                height: 30px;
                line-height: 30px;
                padding-left: 10px;
            }
        }
        .trading_status{     //交易状态
            width: 10vw;
            height: auto;
            @include order_border_global_right;
            .status{
                color: #333;
                height: 30px;
                line-height: 30px;
                padding-left: 10px; 
            }
        }
        .actual_collection{
            width: 15vw;
            height: auto;
            @include order_border_global_right;
            .actual_price,.intro{
                color: #333;
                height: 30px;
                line-height: 30px;
                text-align: left;
                padding-left: 20px;
            } 
        }
      }
      .addr_box{
        width: 85vw;
        height: 20px;
        border-bottom: 1px solid #e5e7e9;
        .adddress{
            line-height: 30px;
            padding-left: 20px;
            
        }
      }
    }
    .page{
        @include page_global;
    }
}
</style>
